<!DOCTYPE html>
<html>
<head>
	<title>3-8 Vue中的列表渲染</title>
	<script type="text/javascript" src="../../vue.js"></script>
</head>
<body>
	<!--
		改变数组结构:
			vm.list[3] = {id:4,name:'love'} 这样添加或修改是无效的
		    1.使用push添加元素:vm.list.push({id:4,name:'love'}) 
		    2.使用splice修改某个下标元素:vm.list.splice(1,1,{id:100,name:'change'})
	 	    3.或者修改数组的引用
	 -->
	<!-- <div id='root'>
		<div v-for="item in list" v-bind:key="item.id">
			{{item.id}}----{{item.name}}
		</div>
	</div> -->


	<div id='root'>
	<!-- 	使用这种循环会发现出现多个div,但实际需求不需要,只需要div span div span交替展示
		<div v-for="item of list" v-bind:key="item.id">
			<div>{{item.name}}--{{item.id}}</div>
			<span>{{item.name}}</span>
		</div> -->

		<!-- 解决:使用 template 占位符,它可以包裹元素,但在实际渲染中它并不会展示-->
		<!-- <template v-for="item of list" v-bind:key="item.id">
			<div>{{item.name}}--{{item.id}}</div>
			<span>{{item.name}}</span>
		</template>  -->


		<!-- 
			vm.userInfo.name='rose' 修改name的值
			vm.userInfo = {
					id:11111,
					name:'tom',
					age:40,
					address:'北京' //修改引用,增加一个值
				}
		 -->
		<div v-for="(itemValue,itemKey,itemIndex) of userInfo" >
			{{itemValue}}--{{itemKey}}--{{itemIndex}}
		</div>

	</div>
	
	<script type="text/javascript">
		var vm = new Vue({
			el:'#root',
			data:{
				//list:[{id:1,name:'tom'},{id:2,name:'rose'},{id:3,name:'jack'}] 数组
				userInfo:{
					id:11111,
					name:'tom',
					age:40
				}
			}
		})
	</script>
</body>
</html>